<template>
  <view class="template-box">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>

    <view class="" style="position: fixed;">

      <view class="row">

        <view class="item original">KAKABULUO</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>
      </view>

      <view class="row invert">

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>

      </view>

      <view class="row">

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>
      </view>

      <view class="row invert">

        <view class="item original">WORD</view>
        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">SEA</view>
        <view class="item original">BOX</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>


      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>

      <view class="row">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>
      </view>

      <view class="row invert">

        <view class="item original">KAKA</view>
        <view class="item original">TRIBE</view>
        <view class="item original">BOX</view>
        <view class="item original">SEA</view>
        <view class="item original">WORD</view>

        <view class="item shadow">KAKA</view>
        <view class="item shadow">TRIBE</view>
        <view class="item shadow">BOX</view>
        <view class="item shadow">SEA</view>
        <view class="item shadow">WORD</view>

      </view>




    </view>


    <view class="tn-text-center tn-color-white" :style="{paddingTop: vuex_custom_bar_height + 20 + 'px'}"
      style="position: relative;">

      <view class="cards-wrapper">
        <view class="card-container">
<!--          <view class="card rotated">-->
          <view class="card" :class="isCanOpen?'rotated':''">
            <view class="card-contents card-front">
              <view class="card-depth">
                <view v-if="isCanOpen" class="card-img"
                      style="background-image:url('http://123.60.182.227/image/box/blindBox.png');width: 400rpx;height: 400rpx;background-size: cover;overflow: hidden;">
                </view>
                <view class="tn-margin-top tn-text-lg">{{openTitle}}</view>

              </view>
            </view>


            <view class="card-contents card-back">
              <!-- 平面效果，我觉得这个简单点比较好看   /6.jpg-->
              <view class="card-depth">
                <view class="card-img"
                      :style="'background-image:url(http://123.60.182.227/image/story/'+blidBoxTypeNumber+'.jpg)'"
                  style="width: 400rpx;height: 400rpx;background-size: cover;overflow: hidden;">
                </view>
                <view class="tn-margin-top tn-text-lg">恭喜获得：{{blindBoxNmae}}</view>
              </view>

            </view>
          </view>
        </view>
      </view>


    </view>
  </view>
</template>

<script>

import * as util from './../../util/util'
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateBox',
    mixins: [template_page_mixin],
    data() {
      return {
        blindBoxNmae:'',
        isCanOpen:false,
        openTitle:'开启中...',
        blidBoxTypeNumber:''
      }
    },
    onLoad(options){
    },
    mounted() {
      this.getBlindBoxName();
    },
    methods: {
      getBlindBoxName(){
        //首先开启盲盒
        this.$http.postRequest('/kakabl/inventory/openCard', {})
            .then(res => {
              if (res.code === 200) {
                this.blidBoxTypeNumber=res.data
                this.blindBoxNmae =  util.blidBoxType(res.data).name;
                this.isCanOpen = true
              } else {
                this.openTitle = res.msg;
              }
            })
       //
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;

    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }

    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }

  .template-box {
    // background: #FBA600;
    background: #16171D;
    height: 100vh;
  }

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100vw;
    overflow: hidden;
    height: 4rem;
    position: relative;
    z-index: -1;
  }

  .row::after {
    content: " ";
    height: 100%;
    width: 100vw;
    z-index: -1;
    position: absolute;
    background: linear-gradient(90deg,
        #0f0f14,
        transparent 40%,
        transparent 60%,
        #0f0f14);
  }

  .item {
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8px;
    color: #FFFFFF80;
    font-size: 32rpx;
  }

  .invert>.original,
  .invert>.shadow {
    animation-direction: reverse;
  }

  .original {
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-name: slide-left;
    animation-iteration-count: infinite;
    animation-direction: forward;
  }

  .shadow {
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-name: slide-left;
    animation-iteration-count: infinite;
    animation-direction: forward;
  }

  @keyframes slide-left {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(calc(-6 * 160rpx));
    }
  }


  /* 图鸟视差开盒*/
  .cards-wrapper {
    margin-top: 200rpx;
  }

  .card-container {
    perspective: 1200px;
  }

  .card {
    margin: 0 auto;
    height: 680rpx;
    width: 600rpx;
    position: relative;
    border-radius: 25rpx;
    transition: all 1s ease;
    transform-style: preserve-3d;
    box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.02)
  }

  .rotated {
    animation: dd-rotation 0.8s ease-in-out 1.6s 1 forwards;
  }


  @keyframes dd-rotation {
    from {
      transform: rotateY(0deg);
    }

    to {
      transform: rotateY(-180deg);
    }
  }


  .card-contents {
    width: 100%;
    height: 100%;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
  }

  .card-depth {
    transform: translateZ(100px) scale(0.98);
    perspective: inherit;
  }

  .card-img {
    border-radius: 20rpx;
    box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.08)
  }

  .card-front {
    background: linear-gradient(to top left, #2F3036, #2F3036);
    transform-style: preserve-3d;
  }

  .card-back {
    transform: rotateY(180deg);
    background: linear-gradient(to top left, #2F3036, #2F3036);
    transform-style: preserve-3d;
  }


  /* 立体魔方 start*/
  $cube-size: 240rpx;
  $cube-split: 120rpx;


  .cube {
    // background: #fff;
    // background-repeat: no-repeat;
    // background-size: cover;
    // height: 550rpx;
    // display: flex;
    // justify-content: center;
    // padding-top: 40rpx;
    // overflow: hidden;
    // position: relative;
    // flex-direction: column;
    // align-items: center;
    // font-weight: 300;

    &__container {
      // margin-top: 100rpx;
      position: relative;
      width: $cube-size;
      height: $cube-size;
      -webkit-perspective: 500px;
      perspective: 500px; //透视太大会超过屏幕就不好了吖

      &:before {
        content: '';
        width: $cube-size;
        height: $cube-size;
        position: absolute;
        // top: calc(50% - ($cube-split - 30px));
        // left: calc(50% - $cube-split);
        // background-color: #3c6496;
        // filter: blur(60px);
        // opacity: .8;
      }

      &__body {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-75px);
        animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
        will-change: transform;

        &__item {
          position: absolute;
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          width: $cube-size;
          height: $cube-size;
          font-size: 30px;
          background-repeat: no-repeat;
          background-size: cover;

          &--front {
            transform: rotateY(0deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }

          &--back {
            transform: rotateX(180deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }

          &--right {
            transform: rotateY(90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }

          &--left {
            transform: rotateY(-90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }

          &--top {
            transform: rotateX(90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }

          &--bottom {
            transform: rotateX(-90deg) translateZ($cube-split);
            background-color: #BEEBFF;
          }
        }
      }
    }
  }

  @keyframes cubeFrame {
    10% {
      transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
    }

    15% {
      transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
    }

    20% {
      transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
    }

    30% {
      transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
    }

    40% {
      transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
    }

    45% {
      transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
    }

    55% {
      transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
    }

    60% {
      transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
    }

    70% {
      transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
    }

    80% {
      transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
    }

    90% {
      transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
    }

    100% {
      transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
    }
  }

  /* 立体魔方 end*/
</style>